.banner{width:100%;height:286px;background-color:aqua;position:relative;overflow:hidden;cursor:pointer}
.imgbox{width:100%;height:286px;position:relative;background-color:#222;overflow:hidden}
.img{position:absolute;display:none;left:50%;margin-left:-550px}
.im{display:block}
.change{height:100px;display:block;position:absolute;z-index:20;opacity:.4;transition:.4s;top:50%;margin-top:-50px}
.change:hover{opacity:1}
.pre{left:1%}.next{right:1%}
.cirbox{width:88px;position:absolute;bottom:15px;z-index:10;left:50%;margin-left:-44px;cursor:pointer}
.cir{width:12px;height:12px;background-color:#fff;opacity:.4;float:left;border-radius:6px;margin:0 5px;cursor:pointer}
.cir:hover{background-color:cyan;transition:.8s}.cr{opacity:1}
.cr:hover{background-color:#fff}